<template>
	<view class="approval-process">
	  <view class="approval-process-top">
		<view class="top">
			<view class="left">
				<!-- <view class="left-conetnt-box"> -->
					<icon-svg icon-class="ren" style="color:#33B5C6;"></icon-svg>
					<view class="description">
						<text>部门经理</text>
						<text style="color: #ccc;font-size: 32rpx;">陈赫斯</text>
					</view>
				<!-- </view> -->
			</view>
			<view class="line"/>
				<view class="right">
					<icon-svg icon-class="ren"></icon-svg>
					<view class="description">
						<text style="color: #ccc;">出纳支付</text>
						<text style="color: #ccc;font-size: 32rpx;">周小晓</text>
					</view>
				</view>
			</view>
		</view>
	 <view class="all">
		 <navigator url="/pages/add/travelApplyBill/allFlow">
			 查看全部流程
		 </navigator>
	 </view>
	 <view class="approval-process-content">
		<view class="title">
			<text>全部历史</text>
			<icon-svg icon-class="icon-test6"></icon-svg>
		</view>
		<view class="content">
			<view class="time">
				<uni-icons color="#bbb" size="14" type="circle" style="margin-right: 10rpx;"/>
				<text>2020-12-27 17:58:17</text>
			</view>
			<view class="datail">
				<icon-svg icon-class="ren" style="color: #bbb;margin:0 10rpx;"></icon-svg>
				<text>陈赫斯</text>
				<text style="color:#bbb;font-size: 30rpx;margin-left: 20rpx;">提交送审</text>
			</view>
		</view>
	</view>
 </view>	
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
	components: {
		uniIcons
	},
}
</script>

<style lang="scss" scoped>
.approval-process{
 .approval-process-top{
	 .top{
		 display: flex;
		 background: #fff;
		 justify-content: space-between;
		 padding:20rpx 100rpx;
		 position: relative;
		 .left,.right{
			 width:30%;
			 text-align: center;
			 text{
				 display: block;
				 text-align: center;
				 font-size: 32rpx;
			 }
			 .svg-icon{
				 font-size: 2em;
			 }
			 .description{
				 margin-top: 20rpx;
			 }
		 }
			 .line{
			   width: 200rpx;
			   height: 10rpx;
			   position: absolute;
			   top: 50rpx;
			   left: 250rpx;
			   background: #EFEFEF;
			 }
	 }
     
 }
 .all{
   color:$tc;
   text-align: center;
   background: #fff;
   padding: 20rpx 0;
 }
  .approval-process-content{
	  background: #fff;
	  margin-top: 40rpx;
	  padding: 20rpx;
	  .content{
		  padding: 20rpx;
		  .time{
			 font-size: 32rpx;
			 margin-bottom: 12rpx;
		  }
		  .detail{
			  margin-top: 20rpx;
			  display: flex;
		  }
	  }
  }
}
</style>
